<template>
    <div class="phone">
        <!-- 屏幕 -->
        <div class="screen">
            <router-view v-slot="{ Component }">
            <!-- 为后面的切换动画做准备 -->
            <!-- <keep-alive> -->
                    <transition>
                            <component :is="Component" />
                    </transition>
            <!-- </keep-alive> -->
            </router-view>
        </div>
        <!-- home键 -->
        <div class="home">
            <div class="home-btn" @click="$router.push({ name: 'FrontPage' })"></div>
        </div>
    </div>
</template>
<script>
import FrontPage from '../components/FrontPage.vue';
export default {
    name: 'ThePhone', // 手机
    components: {
            FrontPage
    }
};
</script>
<style scoped>
.phone {
    height: 100%;
    width: 100%;
    border-radius: 5px;
    padding: 5px;
    background: whitesmoke;
    cursor: pointer;
}
/* 屏幕样式 */
.screen {
    height: 90%;
    position: relative;
   /* background: url(../assets/bg.jpg) no-repeat fixed center center;*/
}
/* home键样式 */
.home {
    height: calc(10% - 5px);
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-btn {
    background: white;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    box-shadow: 0px 0px 2px black;
}
.home-btn:hover {
    box-shadow: inset 0px 0px 4px 1px black;
}
</style>
